<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象</title>
</head>
<body>
    <div id="a">div</div>

    <label for="basketball"><input type="checkbox" name="hobby" id="basketball"> 篮球</label>
    <label for="football"><input type="checkbox" name="hobby" id="football"> 足球</label>
    <label for="pingpangball"><input type="checkbox" name="hobby" id="pingpangball"> 乒乓球</label>
    <label for="paiball"><input type="checkbox" name="hobby" id="paiball"> 排球</label>
    <label for="glball"><input class="c" type="checkbox" name="hobby" id="glball"> 橄榄球</label>
    <label for="blball"><input class="c" type="checkbox" name="hobby" id="blball"> 玻璃球</label>
    <label for="llball"><input class="c" type="checkbox" name="hobby" id="llball"> 溜溜球</label>
    <label for="tball"><input type="checkbox" name="hobby" id="tball"> 台球</label>
    <input type=    "text">

    <img id="b" src="img/0.jpg"  height="200" width="150" title="美女"/>
    <p id="c" style="color: pink; font-size: 20px;">这是一个段落</p>
    <input type="button" onclick="clickMe()" value="点我">
    <br>
</body>
<script>
    //根据id获取dom对象
    // let div = document.getElementById("a");
    // console.log(div);
    //根据name属性获取（单选按钮，多选按钮）
    // let hobbys = document.getElementsByName("hobby");
    // console.log(hobbys);
    //根据标签名称获取
    // let inputs = document.getElementsByTagName("input");
    // console.log(inputs);
    //根据 class 的值获取 元素
    // let clazz = document.getElementsByClassName("c");
    // console.log(clazz);
    // document.write("HelloWorld");
    //font-size fontSize
    function clickMe() {
        //修改标签中的文本
        //innerText：改为标签中的文本， 不能解析标签
        // document.getElementById("a").innerText = "<a href='http://www.qfedu.com'>千锋教育</a>";
        //innerHTML：改为标签中的文本， 可以解析标签
        // document.getElementById("a").innerHTML = "<a href='http://www.qfedu.com'>千锋教育</a>";
        // document.getElementById("b").src = "img/a.jpg";
        // document.getElementById("b").title = "胡总书记";
        // document.getElementById("b").style.border = "1px red solid";
        // document.getElementById("c").style.color = "pink";
        // document.getElementById("c").style.fontSize = "20px";
        //此方法也可以改变样式，但是会覆盖原来的样式
        // document.getElementById("c").style = "color: red;";





    }
</script>
</html>